<template>
    <div>
        <ul>
            <li v-for="(item,index) in arr"
                :key="index"
                class="border-1px"
            >
                <span>{{item.course}}</span>
            </li>
        </ul>

        <div>
            <div class="test1px">1</div>
            <div class="test1px">2</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "list",
        data() {
            return {
                arr: [
                    {course: 'java'},
                    {course: 'Vue.js'},
                    {course: 'javaScript'},
                    {course: '曹操'},
                    {course: '孙权'},
                    {course: '刘备'}
                ]
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../styles/mixin";
    ul, li {
        list-style: none;
        position: relative;
    }

    li:after {
        padding: 1rem;
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        border-top: 1px solid #cdcdcd;
        color: #cdcdcd;
        height: 200%;
        transform-origin: left top;
        transform: scale(0.5);
    }

    .test1px {
        width: 100px;
        height: 100px;
        margin: 30px;
        @include border-1px(#cdcdcd);
    }

</style>
